import React from 'react';
import { Modal, View, Text, TouchableOpacity, StyleSheet, Image, FlatList, TouchableWithoutFeedback } from 'react-native';

interface Gift {
    id: string;
    name: string;
    price: number;
    image: any;
}

interface GiftModalProps {
    visible: boolean;
    onClose: () => void;
    onGiftSelect: (gift: Gift) => void;
}

const GiftModal: React.FC<GiftModalProps> = ({ visible, onClose, onGiftSelect }) => {
    // 礼物数据
    const giftData: Gift[] = [
        { id: '1', name: '玫瑰', price: 5, image: require('../../../assets/images/gift/meigui.png') },
        { id: '2', name: '爱心', price: 10, image: require('../../../assets/images/gift/heart-7.png') },
        { id: '3', name: '蛋糕', price: 15, image: require('../../../assets/images/gift/qiaokeli.png') },
        { id: '4', name: '亲吻', price: 20, image: require('../../../assets/images/gift/zuichun.png') },
        { id: '5', name: '啤酒', price: 100, image: require('../../../assets/images/gift/pijiu.png') },
        { id: '6', name: '汽车', price: 200, image: require('../../../assets/images/gift/paoche.png') },
        { id: '7', name: '轮船', price: 520, image: require('../../../assets/images/gift/chuan.png') },
        { id: '8', name: '飞船', price: 1314, image: require('../../../assets/images/gift/huojian.png') },
    ];

    return (
        <Modal
            animationType="slide"
            transparent={true}
            visible={visible}
            onRequestClose={onClose}
        >
            {/* 用 TouchableWithoutFeedback 包裹整个模态框 */}
            <TouchableWithoutFeedback onPress={onClose}>
                <View style={styles.modalOverlay}>
                    {/* 使用 stopPropagation 避免点击模态框内容时关闭 */}
                    <TouchableWithoutFeedback>
                        <View style={styles.modalContent}>
                            <FlatList
                                data={giftData}
                                numColumns={4} // 每行显示4个礼物
                                renderItem={({ item }) => (
                                    <TouchableOpacity
                                        style={styles.giftItem}
                                        onPress={() => {
                                            onGiftSelect(item); // 选择礼物
                                            onClose(); // 关闭模态框
                                        }}
                                    >
                                        <Image source={item.image} style={styles.giftImage} />
                                        <Text style={styles.giftPrice}>{item.price} 💎</Text>
                                    </TouchableOpacity>
                                )}
                                keyExtractor={(item) => item.id}
                                contentContainerStyle={styles.giftList}
                            />
                        </View>
                    </TouchableWithoutFeedback>
                </View>
            </TouchableWithoutFeedback>
        </Modal>
    );
};

const styles = StyleSheet.create({
    modalOverlay: {
        flex: 1,
        justifyContent: 'flex-end', // 从底部弹出
        backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景
    },
    modalContent: {
        backgroundColor: '#1a1a1a', // 黑色背景
        borderTopLeftRadius: 15,
        borderTopRightRadius: 15,
        padding: 10,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 10,
        width: '90%'
    },
    title: {
        fontSize: 18,
        color: 'white',
        fontWeight: 'bold',
    },
    closeButtonText: {
        fontSize: 20,
        color: 'white',
    },
    giftList: {
        paddingBottom: 15,
    },
    giftItem: {
        alignItems: 'center',
        justifyContent: 'center',
        margin: 8,
        width: 70, // 每个礼物的宽度
    },
    giftImage: {
        width: 50,
        height: 50,
        marginBottom: 5,
    },
    giftPrice: {
        color: 'white',
        fontSize: 12,
    },
});

export default GiftModal;
